<template>
	<view class="container">
		<u-navbar title="收货地址" placeholder leftIconColor="#fff" bgColor="#0a0816"  :autoBack="true">
			<template #right>
				<view @click="hanldeAddedit" class="font-24 color-theme">+新增</view>
			</template>
		</u-navbar>

		<view class="pad-32">
			<view class="pad-24 bg-white radius16 mar-bottom-24" v-for="(item,index) in list">
				<view class="color-black">{{item.name}} {{item.tel}}</view>
				<view class="font-28 mar-top-30">{{item.province}}{{item.city}}{{item.region}}{{item.detail}}</view>
				<view class="buttom betweenX pad-top-24">
					<view class="centerY" @click="hanldeEdit(item)">
						<view class="checkbox-border">
							<u-icon v-if="item.is_def == 1" color="#9f5ff6" name="checkmark-circle-fill"
								size="18"></u-icon>
						</view>
						<view class="font-26 mar-left-10">默认</view>
					</view>
					<view class="button-box">
						<text @click="hanldeDel(index,item)" class="del mar-right-24">删除</text>
						<text @click="hanldeEdit(item)" class="edit">修改</text>
					</view>
				</view>
			</view>
		</view>
		<u-empty v-if="list.length == 0" text="没有收货地址" icon="../../static/image/empty.png"></u-empty>

		<my-popup content="您确定删除这条地址吗？" :show="isPopup" @cancel="isPopup = false" @confirm="hanldeConfirm"></my-popup>
	</view>
</template>

<script>
	import {
		userAddressAll,
		userAddressDel
	} from '@/config/api.js'
	export default {
		data() {
			return {
				isPopup: false,
				list: []
			}
		},
		onShow() {
			this.getUserAddressList();
		},
		methods: {
			// 点击修改
			hanldeEdit(item) {
				uni.setStorageSync('address',item);
				uni.navigateTo({
					url: '/pages/address/edit?id=' + item.id
				})
			},
			// 删除
			hanldeConfirm() {
				userAddressDel({
					id: this.row.id
				}).then(res => {
					this.getUserAddressList();
					this.isPopup = false;
				})
			},
			// 删除地址
			hanldeDel(index, row) {
				this.row = row;
				this.isPopup = true;
			},
			// 获取全部收货地址
			getUserAddressList() {
				userAddressAll().then(res => {
					this.list = res.data.lists;
				})
			},
			// 跳转新增
			hanldeAddedit() {
				uni.navigateTo({
					url: '/pages/address/edit'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		min-height: 100vh;

		::v-deep .u-navbar__content {
			// background-image: url('../../static/image/my-bg.png');
			background-size: cover;
			background-repeat: no-repeat;
			background-color: #f5f5f5;
		}

		.buttom {
			border-top: 2rpx solid #f2f2f2;
			margin-top: 24rpx;
		}

		.checkbox-border {
			border: 2rpx solid rgb(200, 201, 204);
			box-sizing: border-box;
			height: 32rpx;
			width: 32rpx;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
		}


		.button-box {
			.del {
				border: 1rpx solid $uni-theme;
				color: $uni-theme;
				font-size: 24rpx;
				padding: 6rpx 25rpx;
				border-radius: 8rpx;
			}

			.edit {
				border: 1rpx solid $uni-color-primary;
				color: $uni-color-primary;
				font-size: 24rpx;
				padding: 6rpx 25rpx;
				border-radius: 8rpx;
			}
		}
	}
</style>